<script setup lang="ts">
import { Form } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
import { PropType, reactive, watch,ref,onMounted } from 'vue'
import { ViewData } from '@/api/types/userType'
import { useValidator } from '@/hooks/web/useValidator'
import { ElUpload,ElButton,ElImage,ElInput,ElMessage,ElCheckboxGroup,ElCheckbox } from 'element-plus'
import api from '@/api'
import axios from 'axios'
const { required} = useValidator()
const imageServer = '/service/formcenter-service/upload/publicApi/file/'
const {uploadFile,checkUserExist}=api;
const props = defineProps({
  currentRow: {
    type: Object as PropType<Nullable<ViewData>>,
    default: () => null
  },
  formSchema: {
    type: Array as PropType<FormSchema[]>,
    default: () => []
  }
})
const { register, methods, elFormRef } = useForm({schema: props.formSchema});
const rules = reactive({
  grade: [required()],
  classNum: [required()],
  leader:[required()],
  mobile:[required()]
})
const formData=reactive({
  usciImage:'',
  apps:[],
})
const appList=ref([])
onMounted(async ()=>{
  const url="/apps.json";
  appList.value= (await axios.get(url)).data;
})
watch(
  () => props.currentRow,
  (currentRow) => {
    if (!currentRow) return;
    const { setValues } = methods;
    setValues(currentRow) ;
    formData.usciImage=currentRow.usciImage
    formData.apps=currentRow.apps??[];
    elFormRef;
  },
  {
    deep: true,
    immediate: true
  }
)
watch(
    () => formData,
    (formData) => {
        const { setValues } = methods
        setValues(formData)
    },
    { deep: true, immediate: true }
)
const handlerUpload = async (o) => {
    const res = await uploadFile({ files: o.file })
    const file = res.data[0].id + res.data[0].type
    formData.usciImage = file
}

const toCheckUser=()=>{
  if(!formData.managerPhone)return;
  checkUserExist({userName:formData.managerPhone}).then(res=>{
    if(!res.data){
      ElMessage.success("用户检测成功");
    }else{
      ElMessage.error("用户检测失败");
    }
  })
}
defineExpose({
  elFormRef,
  getFormData: methods.getFormData
})
</script>

<template>
  <Form :rules="rules"  @register="register" v-model="formData">
      <template #managerPhone v-if="currentRow!=null">
        <span>{{ currentRow.managerPhone }}</span>
      </template>
      
      <template #managerPhone v-else>
        <ElInput v-model="formData.managerPhone" placeholder="请输入账户并检测账户是否存在">
          <template #append>
            <ElButton @click="toCheckUser">检测账户</ElButton>
          </template>
        </ElInput>
      </template> 
      <template #devicePassword v-if="currentRow!=null">
        <ElButton type="primary">重置密码</ElButton>
      </template>
      <template #usciImage>
        <ElUpload
                        :showFileList="false"
                        action=""
                        accept=".jpg,.jpeg,.png"
                        :http-request="handlerUpload"
                    >
                        <ElButton type="primary">上传图片</ElButton>
                    </ElUpload>
                    <div style="width: 100%; margin-top: 5px" v-show="formData.usciImage">
                        <ElImage
                            style="width: 100px; height: 100px"
                            on-exceed
                            :src="imageServer + formData.usciImage"
                            :preview-src-list="[imageServer + formData.usciImage]"
                        />
                    </div>
      </template>
      <template #apps>
        <ElCheckboxGroup v-model="formData.apps">
          <ElCheckbox v-for="item in appList" :key="item.id" :label="item.id" :value="item.id">{{ item.title }}</ElCheckbox>
        </ElCheckboxGroup>
      </template>
  </Form>  
</template>
<style scoped lang="less">
:deep(.el-divider__text){
  background: transparent;
  &::before{
    content:'';
    width:10px;
    height:10px;
    margin-right: 5px;
    display: inline-block;
    background: #039bf3;
  }
}
</style> 